<template>
  <div>
    <img :src="imgurl" alt="" />
    <a href="#" class="hot">发现最新最热电影</a>
    <a href="#" class="openapp"
      >打开App <img src="../../assets/images/rightlt.png" alt=""
    /></a>
  </div>
</template>

<script>
// 如果在js里面要引本地图片
//用 require("../../assets/images/logo.png"),
export default {
  data() {
    return {
      imgurl: require("../../assets/images/logo.png"),
    };
  },
};
</script>

<style lang="less" scoped>
@import "../../assets/css/var.less";

div {
  width: 100%;
  height: 60px;
  border-bottom: 1px solid @border-color;
  background: #fff;
  position: relative;

  > img {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 94px;
    height: 39px;
  }
  .hot {
    display: inline-block;
    position: absolute;
    height: 17px;
    line-height: 17px;
    right: 100px;
    top: 20px;
    font-size: 14px;
    font-weight: 600;
    color: #666;
  }
  .openapp {
    font-size: 16px;
    position: absolute;
    right: 12px;
    top: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 15px;
    color: #b37e7e;
    font-weight: 700;
    img {
      width: 11px;
      height: 11px;
      padding-left: 1px;
      display: inline-block;
    }
  }
}
</style>
